<div class="animated fadeIn">
  <div class="row">
    <div class="col-md-9">
      <div class="card">
        <div class="card-header">
          <strong>文件--</strong> 上传
        </div>
        <div class="card-block">
          <form action="" method="post" enctype="multipart/form-data" class="form-horizontal ">
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="file-input">单个文件</label>
              <div class="col-md-9">
                <input type="file" ng2FileSelect [uploader]="uploader"  id="file-input" name="file-input">
              </div>
            </div>
            
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="file-multiple-input">多文件选择</label>
              <div class="col-md-9">
                <input type="file" type="file" ng2FileSelect [uploader]="uploader" id="file-multiple-input" name="file-multiple-input" multiple>
              </div>
            </div>
          </form>
        </div>


    <div class="container">
        <div class="row">
            <div class="col-md-9" style="margin-bottom: 40px">
                <h3>上传队列</h3>
                <p>Queue length: {{ uploader?.queue?.length }}</p>
                <table class="table">
                    <thead>
                    <tr>
                        <th width="50%">文件名</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let item of uploader.queue">
                        <td><strong>{{ item?.file?.name }}</strong></td>
                        <td nowrap>
                            <button type="button" class="btn btn-success btn-xs"
                                    (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
                                <span class="glyphicon glyphicon-upload"></span> 上传
                            </button>
                            <button type="button" class="btn btn-warning btn-xs"
                                    (click)="item.cancel()" [disabled]="!item.isUploading">
                                <span class="glyphicon glyphicon-ban-circle"></span> 取消
                            </button>
                            <button type="button" class="btn btn-danger btn-xs"
                                    (click)="item.remove()">
                                <span class="glyphicon glyphicon-trash"></span> 移除
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div>
                    <div>
                        上传进度:
                        <div class="progress" style="">
                            <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card-footer">
        <button type="button" class="btn btn-sm btn-primary" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length"><i class="fa fa-dot-circle-o"></i> 全部上传</button>
        <button type="button" class="btn btn-sm btn-danger"  (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading"><i class="fa fa-ban"></i> 全部取消</button>
        <button type="button" class="btn btn-sm btn-danger" (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length"><i class="fa fa-ban"></i> 全部移除</button>
    </div>
    </div>
</div>
</div>





